<template>
  <div id="index">
    <el-container>
      <el-header height="">
        <img src="/static/logo.jpg" style="width:100px">
        <span>问卷管理系统</span>
           <el-button type="text" @click="logout">注销「{{userInfo}}」</el-button>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu default-active="/index" :router="true">
            <template v-for="menu in menusList">
                  <el-menu-item v-if="menu.children.length==0" :key="menu.sort" :index="menu.url">
                  <i :class="menu.icon"></i>
                  {{menu.text}}
                </el-menu-item>
                <el-submenu v-if="menu.children.length>0"  :index="menu.url" :key="menu.sort">
                  <span slot="title">
                    <i :class="menu.icon"></i>
                    {{menu.text}}
                  </span>
                  <el-menu-item v-for="submenu in menu.children" :key="submenu.sort" :index="submenu.url">
                  <i :class="submenu.icon"></i>
                  {{submenu.text}}
                  </el-menu-item>
                </el-submenu>
            </template>
        </el-menu>
      </el-aside>
      <el-main height="">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>

</div>
</template>

<script>
export default {
  data() {
    return {
      menusList: [],
      userInfo:"",
    };
  },
  created() {
    this.lgusm();
    this.getMenusList();
    this.$root.$on('loadingHTML',()=>{
      this.getMenusList();
    })
  },
  methods: {
    lgusm(){
      this.$http.post('/users/one').then(result=>{
        this.userInfo=result.data.data.username
      })
    },
    logout(){
      this.$http.get('/users/logout').then(result=>{
        this.$router.push('/login')
      })
    },
    getMenusList() {
      this.treeLoading = true;
      this.$http.get("/menus/list?status=1").then(result => {
        this.treeLoading = false;
        if (result.data.error > 0 && result.data.error == 4) {
          this.$router.push("/login");
          return;
        }
        this.menusList = this.$tree(result.data.data);
      });
    },
  }
};
</script>

<style>
.el-tree-node__content {
  height: 40px !important;
}
</style>


